<!-- 这是对Echarts的二次封装 -->
<template>
  <div id="myEcharts" ref="echartsRef" :style="{ width, height }"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, withDefaults } from 'vue'

import * as echarts from 'echarts'

import useEchartsOptions from '@/hooks/use-echarts-options'

interface PropsTypes {
  option: echarts.EChartsOption
  width?: string
  height?: string
}

const props = withDefaults(defineProps<PropsTypes>(), {
  width: '100%',
  height: '300px'
})

const echartsRef = ref<HTMLElement>()

onMounted(() => {
  const { setOptions } = useEchartsOptions(echartsRef.value!)

  // 调用
  setOptions(props.option)

  // setInterval(() => {
  //   echartResize()
  // }, 1000 / 60)
})
</script>

<style scoped lang="less"></style>
